const info = {
    name: '嘎子直播间的假手机',
    price: 100,
    desc: '详细的描述信息',
    types: [ '16G', '8G', '4G' ],
    storages: [ '128G', '256G' ],
    colors: [ '远峰蓝', '深空灰', '土豪金' ],
    list: [
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg'
      },
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg'
      },
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg'
      }
    ]
  }


  //面相对象的方式实现放大镜  
  // 属性 
  // 1. 最大的盒子 
  // 2. 遮罩层的盒子 mask
  // 3.  展示图片的盒子 show
  // 4.  放大图片的盒子 enlarge
  // 5.  小图列表 items
  // 6. mask 遮罩层的尺寸 
  // 7.  放大图片的尺寸 bg   
  // 8.  展示图片的宽度和高度 show 
  // 9 enlarge 放大图片盒子的宽度和高度



  // 方法
  // 按照比例进行 方法 

  // 移入移出事件
 // 1. 移入 mask 显示 放大区域也显示
 // 2. 移出 mask 隐藏 放大区域也隐藏

  // 列表切换 
  // 1. 点击小图列表 切换大图 和 放大图片
  // 联动效果 遮罩层动 放大图片也跟着动 

  // 鼠标在show 上移动 遮罩层跟着动 
  // 根据比例  
  // 放大区域 图片的移动距离 
  

  class Enlarge{
      constructor(selector){
          this.ele = document.querySelector(selector);
          this.mask = this.ele.querySelector('.mask');
          this.show = this.ele.querySelector('.show');
          this.enlarge = this.ele.querySelector('.enlarge');
          this.list = this.ele.querySelector('.list');
          this.bindHtml();
          // 获取尺寸  
          //  show mask enlarge 大图的尺寸
          this.show_width = this.show.clientWidth;
          this.show_height = this.show.clientHeight;
          this.mask_width = parseInt(window.getComputedStyle(this.mask).width);
          this.mask_height = parseInt(window.getComputedStyle(this.mask).height);
          //超大图片的尺寸
          this.bg_width  = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width);
          this.bg_height  = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height);
          this.enlarge_width = 0;  // 准备变量  存放放大盒子的尺寸
          this.enlarge_height = 0;
          
          this.setScale();
          this.overOut();
          this.listChange();
          this.move();
          // console.log(this.bg_height,this.bg_width);
      }

      bindHtml(){
          const imgEle = document.createElement('img');

          // show 
          const showImg = imgEle.cloneNode(true);    
          showImg.src = info.list[0].show;
          this.show.insertBefore(showImg,this.mask);

          // enlarge
          const enlargeImg = imgEle.cloneNode(true);    
          enlargeImg.src = info.list[0].enlarge;
          this.enlarge.appendChild(enlargeImg);

          // list
          info.list.forEach((item,index)=>{
              const li = document.createElement('li');
              const img = imgEle.cloneNode(true);  
              img.src = item.item;
              li.appendChild(img);
              // 给每个li 加一个自定的属性 
              li.dataset.show = item.show;
              li.dataset.enlarge = item.enlarge;
              if(index===0) li.classList.add('active');
              this.list.appendChild(li);
          })
      }


      // 按照比例进行 
      // show尺寸     图片尺寸
      // -------- = -----------
      // mask尺寸     承载放大图片的盒子尺寸

      // 承载放大图片的盒子尺寸 = 图片尺寸 * mask尺寸 / show尺寸
      setScale(){

        // 算出承载放大图片的盒子尺寸  开始设置的时候为 0   0
        // 这个盒子的大小要随着比例变化 
        this.enlarge_width = this.bg_width * this.mask_width / this.show_width;
        this.enlarge_height = this.bg_height * this.mask_height / this.show_height;
        
        //直接赋值
        this.enlarge.style.width = this.enlarge_width + 'px';
        this.enlarge.style.height = this.enlarge_height + 'px';
      }

      overOut(){
        this.show.addEventListener('mouseover',()=>{
          this.mask.style.display = 'block';
          this.enlarge.style.display = 'block';
        });
        this.show.addEventListener('mouseout',()=>{
          this.mask.style.display = 'none';
          this.enlarge.style.display = 'none';
        });

      }

      listChange(){
          this.list.addEventListener('click',e=>{
              if(e.target.nodeName === 'LI'){
                  //先移出所有的active
                  for(let i=0;i<this.list.children.length;i++){
                      this.list.children[i].classList.remove('active');
                  }
                  //再给当前的加上active
                  e.target.classList.add('active');
              }
              this.show.firstElementChild.src = e.target.dataset.show;
              this.enlarge.firstElementChild.src = e.target.dataset.enlarge;

              
          })
      }

      move(){
          this.show.addEventListener('mousemove',e=>{

              //遮罩层跟着鼠标动 鼠标在遮罩层的中间 
              // offsetX offsetY 
              // 鼠标的实时位置 - 遮罩层的尺寸
              let x = e.offsetX - this.mask_width/2;
              let y = e.offsetY - this.mask_height/2;
              // page
              // client
              // 边界值 
              if(x<=0) x=0;
              if(y<=0) y=0;
              if(x>=this.show_width - this.mask_width){
                  x = this.show.width - this.mask_width;
              }
              if(y>=this.show_height - this.mask_height){
                y = this.show_height - this.mask_height;
              }

              this.mask.style.left = x+'px';
              this.mask.style.top = y+'px';

              

              // 中图动  大图也得动

              // mask尺寸        mask的移动距离
              // --------   =   ---------------
              //                 承载最大图尺寸盒子的移动距离
              // show的尺寸
              //承载最大图尺寸盒子的移动距离 = show的尺寸*mask的移动距离 / mask的尺寸 

              this.enlarge.firstElementChild.style.left = -x * this.show_width / this.mask_width+'px';
              this.enlarge.firstElementChild.style.top = -y * this.show_height / this.mask_height+'px';

              //方向要相反才可以

          });
      }


  }

